<template>
    <div class="box">
         
      <van-nav-bar left-arrow @click-left="onClickLeft" size="18px" color="#000"/>

         <van-button type="primary" size=large class="btn-l" to="/home" >下一步</van-button>
        <div class="box1">
        <h1>根据你的信息</h1>
        <h1>我们为你推荐了一下课程</h1>
        <h2 >系列课程</h2>
           <p>
               <img  src="../assets/jianshen.jpg"  >
               </p> 
               </div>
               <div class="box2">
        <h2>针对性训练</h2>
            <div class="x1">
            <p>{{pn}}</p>
           
            <span>{{sn}}</span>
             <van-checkbox v-model="checked" class="f1"></van-checkbox>
             </div>
            <div></div>
            <div class="x2">
            <p>{{pns}}</p>
            <van-checkbox v-model="checked1" class="f2" style="margin-bottom:20px"></van-checkbox>
            <span>{{sns}}</span>
            </div>
            </div>

   
            
    </div>
    
</template>

<script>
export default {
name:'Pipei',
data(){
    return{
        // src:'',
        pn:'上肢力量提升训练',
        sn:'13个动作不循环13分钟',
        pns:'下肢力量提升训练',
        sns:'7个动作不循环10分钟',
        checked: 'true',
        checked1:'true'

    }
   
},

 methods:{

         onClickLeft(){
     this.$router.go(-1)
    }
    }



}
</script>

<style scoped>
.box {
  width: 100%;
  overflow: hidden;
padding: 60px 20px 0 20px;
  box-sizing: border-box;
  text-align: center;
}
.box1 p{

    width: 100%;
    height:150px;
    border: 1px solid red;
    margin: 30px 0
}
.box2 p,span{
    display: block;
    text-align:left;
    line-height: 20px

}
.box1 h2:nth-of-type(1){
    margin-top:20px 
}
.box .btn-l{
    display: flex;
    justify-content: center;
      position: absolute;
    bottom: 0px;
    left: 0;
    
   
   }
   .f1{
       position:absolute;
       right: 40px;
       
        bottom:30%
       

   }
   .f2{


        position:absolute;
       right: 40px;
       
        bottom:18%
   }
    .van-nav-bar{
     position: fixed;
     top:0;
     left: 0;
   }
   .x1{
       margin-top:30px 
   }
   .x1 p,.x2 p{
       font-size: 18px;
       line-height: 34px;
        }
.x1 span,.x2 span{
    font-size: 14px;
    
}
</style>
